(() => {
    /**
     * placement: 方向  defalut: top
     * content: 内容
     */
    initPopover()
})()
function initPopover(ele) {
    if(ele) {
        const item = ele
        const content = item.getAttribute('content')
        if(content) {
            if(gugeeGobal.isMobile) {
                const config = {
                    class: 'popover-modal',
                    title: item.getAttribute('data-title') || 'Tips',
                    isShowCancelBtn: false,
                    confirmBtnText: 'I Know',
                    position: {
                        top: '10vh'
                    },
                    beforeShowEvent: modal => {
                        modal.style.maxHeight = 'calc(80vh - 75px)'
                        modal.querySelector('.modal-body').style.maxHeight = 'calc(80vh - 211px)'
                    }
                }
                item.addEventListener('click', e => {
                    config.content = item.getAttribute('content')
                    showModal(config)
                })
            } else {
                const dom = document.createElement('div')
                let domClass = 'gd-popover__inner'
                const placement = item.getAttribute('placement')
                if(placement) {
                    if(placement === 'right') {
                        domClass += ' gd-popover-' + placement
                    }
                } else {
                    domClass += ' gd-popover-top'
                }
                dom.className = domClass
                dom.innerHTML = content

                const hasEle = item.querySelector('.gd-popover__inner')
                if(hasEle) {
                    hasEle.remove()
                }

                item.appendChild(dom)
                item.addEventListener('mouseover', () => {
                    dom.show()
                })
                item.addEventListener('mouseout', () => {
                    dom.hide()
                })
            }
        }
    } else {
        document.querySelectorAll('.gd-popover').forEach(item => {
            const content = item.getAttribute('content')
            if(content) {
                if(gugeeGobal.isMobile) {
                    const config = {
                        title: item.getAttribute('data-title') || 'Tips',
                        isShowCancelBtn: false,
                        confirmBtnText: 'I Know',
                        position: {
                            top: '10vh'
                        },
                        beforeShowEvent: modal => {
                            modal.style.maxHeight = 'calc(80vh - 75px)'
                            modal.querySelector('.modal-body').style.maxHeight = 'calc(80vh - 211px)'
                        }
                    }
                    item.addEventListener('click', e => {
                        config.content = item.getAttribute('content')
                        showModal(config)
                    })
                } else {
                    const dom = document.createElement('div')
                    let domClass = 'gd-popover__inner'
                    const placement = item.getAttribute('placement')
                    if(placement) {
                        if(placement === 'right') {
                            domClass += ' gd-popover-' + placement
                        }
                    } else {
                        domClass += ' gd-popover-top'
                    }
                    dom.className = domClass
                    dom.innerHTML = content

                    const hasEle = item.querySelector('.gd-popover__inner')
                    if(hasEle) {
                        hasEle.remove()
                    }

                    item.appendChild(dom)
                    item.addEventListener('mouseover', () => {
                        dom.show()
                    })
                    item.addEventListener('mouseout', () => {
                        dom.hide()
                    })
                }
            }
        })
    }
}